<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">添加习惯</text>
                <button class="p-2 opacity-0">
                    <text class="iconfont icon-arrow-left"></text>
                </button>
            </view>
        </view>

        <!-- 表单内容 -->
        <view class="px-5 py-6">
            <form @submit="saveHabit">
                <!-- 习惯名称 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">习惯名称</text>
                    <input class="premium-input" type="text" placeholder="例如：晨跑、阅读、冥想..." v-model="habit.title"
                        maxlength="20" />
                </view>

                <!-- 习惯图标 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">选择图标</text>
                    <scroll-view scroll-x class="whitespace-nowrap -mx-1 py-2">
                        <view class="inline-block" v-for="(icon, index) in icons" :key="index">
                            <button class="w-12 h-12 rounded-full mx-1 flex items-center justify-center"
                                :class="habit.icon === icon ? 'bg-indigo-100' : 'bg-slate-50'" @tap="selectIcon(icon)">
                                <text class="iconfont text-xl" :class="icon"
                                    :style="{ color: habit.icon === icon ? '#6366f1' : '#64748b' }"></text>
                            </button>
                        </view>
                    </scroll-view>
                </view>

                <!-- 习惯颜色 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">选择颜色</text>
                    <scroll-view scroll-x class="whitespace-nowrap -mx-1 py-2">
                        <view class="inline-block" v-for="(color, index) in colors" :key="index">
                            <button class="w-8 h-8 rounded-full mx-1 border-2"
                                :style="{ backgroundColor: color.value, borderColor: habit.color === color.value ? '#6366f1' : color.value }"
                                @tap="selectColor(color.value)"></button>
                        </view>
                    </scroll-view>
                </view>

                <!-- 习惯时间 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">提醒时间</text>
                    <view class="premium-input flex items-center" @tap="showTimePicker">
                        <text class="iconfont icon-clock text-slate-400 mr-2"></text>
                        <text class="text-slate-800">{{ habit.time || '选择时间' }}</text>
                        <text class="iconfont icon-chevron-right text-slate-400 ml-auto"></text>
                    </view>
                </view>

                <!-- 重复频率 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">重复频率</text>
                    <view class="grid grid-cols-4 gap-2">
                        <button v-for="(day, index) in weekdays" :key="index"
                            class="py-2 rounded-lg text-center text-sm"
                            :class="habit.frequency.includes(index) ? 'bg-indigo-100 text-indigo-600' : 'bg-slate-50 text-slate-600'"
                            @tap="toggleDay(index)">
                            {{ day }}
                        </button>
                    </view>
                </view>

                <!-- 目标连击 -->
                <view class="mb-6">
                    <text class="block text-sm font-medium text-slate-700 mb-2">目标连击</text>
                    <view class="flex items-center">
                        <slider class="flex-1 mr-4" min="7" max="100" step="1" show-value activeColor="#6366f1"
                            backgroundColor="#e2e8f0" block-color="#ffffff" block-size="24" :value="habit.targetStreak"
                            @change="onStreakChange" />
                        <text class="text-slate-800 font-medium">{{ habit.targetStreak }}天</text>
                    </view>
                </view>

                <!-- 备注 -->
                <view class="mb-8">
                    <text class="block text-sm font-medium text-slate-700 mb-2">备注（可选）</text>
                    <textarea class="premium-input" placeholder="添加一些备注..." v-model="habit.note" maxlength="100"
                        auto-height />
                </view>

                <!-- 保存按钮 -->
                <button class="premium-button w-full" form-type="submit">
                    保存习惯
                </button>
            </form>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 习惯数据
const habit = ref({
    title: '',
    icon: 'icon-running',
    color: '#6366f1',
    time: '',
    frequency: [0, 1, 2, 3, 4], // 默认周一到周五
    targetStreak: 21,
    note: ''
});

// 图标列表
const icons = ref([
    'icon-running',
    'icon-book',
    'icon-meditation',
    'icon-water',
    'icon-dumbbell',
    'icon-code',
    'icon-pen',
    'icon-sleep',
    'icon-music',
    'icon-language'
]);

// 颜色列表
const colors = ref([
    { name: '靛蓝', value: '#6366f1' },
    { name: '紫色', value: '#8b5cf6' },
    { name: '粉色', value: '#ec4899' },
    { name: '红色', value: '#ef4444' },
    { name: '橙色', value: '#f97316' },
    { name: '黄色', value: '#eab308' },
    { name: '绿色', value: '#22c55e' },
    { name: '青色', value: '#06b6d4' },
    { name: '蓝色', value: '#3b82f6' }
]);

// 星期几
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

// 选择图标
const selectIcon = (icon: string) => {
    habit.value.icon = icon;
};

// 选择颜色
const selectColor = (color: string) => {
    habit.value.color = color;
};

// 显示时间选择器
const showTimePicker = () => {
    uni.showTimePicker({
        success: (res) => {
            habit.value.time = res.time;
        }
    });
};

// 切换星期几
const toggleDay = (day: number) => {
    const index = habit.value.frequency.indexOf(day);
    if (index > -1) {
        // 至少保留一天
        if (habit.value.frequency.length > 1) {
            habit.value.frequency.splice(index, 1);
        }
    } else {
        habit.value.frequency.push(day);
        // 排序
        habit.value.frequency.sort();
    }
};

// 更新目标连击
const onStreakChange = (e: any) => {
    habit.value.targetStreak = e.detail.value;
};

// 保存习惯
const saveHabit = () => {
    // 表单验证
    if (!habit.value.title.trim()) {
        uni.showToast({
            title: '请输入习惯名称',
            icon: 'none'
        });
        return;
    }

    if (!habit.value.time) {
        uni.showToast({
            title: '请选择提醒时间',
            icon: 'none'
        });
        return;
    }

    // 这里应该将数据保存到数据库或本地存储
    // 为了演示，我们只是显示一个成功提示
    uni.showToast({
        title: '习惯创建成功',
        icon: 'success',
        success: () => {
            setTimeout(() => {
                goBack();
            }, 1500);
        }
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-book:before {
    content: '\e620';
}

.icon-meditation:before {
    content: '\e621';
}

.icon-water:before {
    content: '\e622';
}

.icon-dumbbell:before {
    content: '\e623';
}

.icon-pen:before {
    content: '\e624';
}

.icon-sleep:before {
    content: '\e625';
}

.icon-music:before {
    content: '\e626';
}

.icon-clock:before {
    content: '\e627';
}

.icon-arrow-left:before {
    content: '\e628';
}

.icon-chevron-right:before {
    content: '\e629';
}
</style>